<template>
	<div class="articleview useview alltop allbgc">
		<div class="articleview-top useview-top alltop">
			<span>
				<router-link to="/"><</router-link>
			</span>
			<p>文章详情</p>
		</div>
		<div class="articleview-main">
			<h3>关键时刻，莫迪受重挫</h3>
			<div class="articleview-user">
				<div class="articleview-user-l">
					<img src="../assets/apple-1.jpg" alt="">
					<div class="articleview-user-l-p">
						<span>作者</span>
						<em>2021-12-2</em>
					</div>
				</div>
				<div class="articleview-user-r">
					<span>
						<van-icon name="plus" size="15" /> 已关注
					</span>
				</div>
			</div>
			<div class="articleview-page">
				<p>在新冠疫情肆虐的印度，总理莫迪面临新的政治麻烦。据英国《卫报》报道，印度总理莫迪在关鍵的西孟加拉邦选举中遭遇罕见的政治失败。有迹象表明选民对他处理新冠疫情的做法不满。报道称，疫情期间缩短投票时间，并将选举活动转到网上，但由印度人民党控制的选举委员会拒绝了该提议。在首府加尔各答，一些实验室称，检测结果显示新冠阳性比例高达50%。莫迪未能夺取孟加拉，原因跟他处理疫情不力有关。当天，专栏作家斯瓦迪查图尔维第在新德里电视台网站撰文评论：“印人党并非一股不可阻挡的力是。。”</p>
			</div>
			<div class="articleview-discuss">
				<div class="articleview-discuss-l">
					<img src="../assets/apple-2.jpg" alt="">
					<div class="articleview-discuss-l-p">
						<a>小张</a>
						<span>不错</span>
						<em>2021-05-12<em>3回复</em></em>
					</div>
				</div>
				<div class="articleview-discuss-r">
					<span>
						<van-icon name="good-job" color="#f00" size="16"/>21
					</span>
				</div>
			</div>
		</div>
		<div class="articleview-footer">
			<input type="text" placeholder="写评论">
			<van-icon name="comment-o" color="#848484" size="18"/>
			<van-icon name="star" size="18"/>
			<van-icon name="good-job" color="#f00" size="18"/>
			<van-icon name="share" color="#848484" size="18"/>
		</div>
	</div>
</template>

<script>
</script>

<style lang="less">
	.articleview {
		color: #000;
	}
	.articleview-top>p {
		color: #fff;
	}

	.articleview-main {
		background-color: #fff;
	}
	.articleview-main span {
		line-height: .3;
	}

	.articleview-main h3 {
		padding: 20px 0 10px 20px;
		margin: 0;
	}

	.articleview-user,.articleview-discuss {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #ececec;
	}

	.articleview-user-l {
		height: 70px;
		width: 36%;
		display: flex;
		justify-content: space-between;
		padding-left: 10px;
	}
	.articleview-discuss-l{
		height: 100px;
		width: 53%;
		display: flex;
		justify-content: space-between;
		padding-left: 10px;
	}
	.articleview-user-l img,.articleview-discuss-l img{
		width: 50px;
		height: 50px;
		margin-top: 11px;
		border-radius: 50%;
	}

	.articleview-user-l-p {
		padding-top: 22px;
	}

	.articleview-user-l-p span {
		font-size: 14px;
	}

	.articleview-user-l-p em{
		font-style: normal;
		font-size: 14px;
		color: #a5a5a5;
	}

	.articleview-user-r {
		padding-top: 22px;
		padding-right: 15px;
	}

	.articleview-user-r span ,.articleview-discuss-l-p>em>em{
		width: 90px;
		height: 28px;
		line-height: 28px;
		text-align: center;
		border-radius: 20px;
		font-size: 14px;
		border: 1px solid #e2e2e2;
		color: #646464;
	}
	.articleview-page p{
		font-size: 15px;
		line-height: 1.6;
		padding: 15px 13px 10px;
	}
	.articleview-discuss-l-p{
		line-height: 3;
	}
	.articleview-discuss-l-p a{
		color: #5555ff;
		font-size: 14px;
	}
	.articleview-discuss-l-p>em>em{
		margin-left: 10px;
		padding: 2px 5px;
	}
	.articleview-discuss-l-p em {
		color: #000;
		font-style: normal;
		font-size: 14px;
	}
	.articleview-discuss-r {
		margin-right: 20px;
		font-size: 14px;
	}
	.articleview-footer{
		width: 100%;
		position: fixed;
		bottom: 0;
		background-color: #fff;
		border-top: 1px solid #d4d4d4;
	}
	.articleview-footer input{
		height: 25px;
		width: 180px;
		text-align: center;
		border: 1px solid #d8d8d8;
		outline: none;
		border-radius: 20px;
		margin: 0 15px;
	}
	.articleview-footer .van-icon{
		padding: 0 10px;
	}
</style>
